import React, { useEffect } from 'react';
import StaffAmount from './components/StaffAmount';
import StaffLists from './components/StaffLists';
import Column from './components/Column';
import { useSelector, useDispatch } from "umi";
import AgeColumn from './components/AgeColumn';
import Pie from './components/Pie';
import { Spin } from "antd"
import "./css/index.less"

export default function index() {
    const {
        staffAmountLists,
        staffData,
        pieList,
        columnList,
        marriageData,
        constellationData
    } = useSelector(state => state.dashboard);
    const { effects } = useSelector(state => state.loading);
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch({
            type: "dashboard/initDashboardList"
        })
    }, [])
    return (
        <Spin spinning={effects['dashboard/initDashboardList']} size="large" tip="加载中...">
            <div className='dashboard-container'>
                {staffAmountLists.map((el, index) => {
                    return <StaffAmount key={index} {...el}></StaffAmount>
                })}
                {/* 圆形图 */}
                {pieList.map((el, index) => (<Pie {...el} key={index}></Pie>))}

                {/* 平均年龄 */}
                {pieList[1] && <AgeColumn {...pieList[1]}></AgeColumn>}
                {/* 婚姻图 */}
                <Pie {...marriageData}></Pie>

                {/* 树状图 */}
                {columnList.map((el, index) => {
                    return (
                        <Column {...el} key={index}></Column>
                    )
                })}
                {/* 星座图 */}
                <Pie {...constellationData}></Pie>
                <StaffLists staffData={staffData.data} title={staffData.title} StyleData={staffData.StyleData}></StaffLists>
            </div></Spin>
    )
}
